import React from 'react';
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import chinagData from './data/geo.json';
import {
  // addLegend,
  addInfoControl,
  mapInfoContol,
  transformData,
  joinData,
  compare,
} from './layers/common';
import ProvinceNcovLayer from './layers/province';
import dataPoint from './data/data.json';

import { getAreaData } from 'admin/servers/modules/DataStatistics';

class AreaMap extends React.Component {
  // @ts-ignore
  private provinceLayer: any;

  public componentWillUnmount() {
    this.provinceLayer.destroy();
  }
  public async componentDidMount() {
    console.log('Row:2-2 Map--Mount--');
    let ncovData: any = [];
    let provinceTop10: any = [];
    const res = await getAreaData();

    if (res && res.code === 0) {
      console.log('✨✨✨✨✨✨✨✨✨✨地图->1.后端数据-success', res);
      // 有业务数据
      ncovData = transformData(res.data);
      console.log('✨✨✨✨✨✨✨✨✨✨地图->2.转换后-业务数据', ncovData);
      // 省份排名前10数据
      provinceTop10 = ncovData.map((item: any) => {
        return {
          name: item.name,
          count: item.count,
        };
      });
      provinceTop10.sort(compare('count'));
    }

    // 初始化场景
    const scene = new Scene({
      id: 'map',
      logoVisible: false,
      map: new Mapbox({
        center: [106, 34],
        doubleClickZoom: false,
        pitch: 10,
        zoom: 4,
        minZoom: 2,
        maxZoom: 7,
        rotation: 0,
        style: 'blank',
      }),
    });
    // 加载地图
    scene.on('loaded', () => {
      // 业务数据与geo地理位置数据拼接到一起
      const chinageo = joinData(chinagData, ncovData);
      scene.addControl(addInfoControl());
      scene.addControl(mapInfoContol(provinceTop10));
      console.log('✨✨✨✨✨✨✨✨✨✨地图->3.拼接后-业务数据和地理数据', chinageo);
      this.provinceLayer = new ProvinceNcovLayer(
        scene, // 固定：场景
        chinageo, // 地图+业务数据
        dataPoint, // 固定：地图文字
        provinceTop10 // 排名
      );
    });
  }

  render() {
    return <div id="map" className="area-map"></div>;
  }
}

export default AreaMap;
